<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '80px',
    }"
  >
    <div class="wrap-btn-group">
      <span class="wrap-btn wrap-go-back" @click="go">返回</span>
    </div>
    <!-- 基本信息 -->
    <div class="wrap-other-roll">
      <!-- 基础信息 -->
      <div class="card">
        <div class="title">错误信息</div>
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 服务名称 </template>
            {{ basic.appName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> IP </template>
            {{ basic.ip }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 错误类型 </template>
            {{ basic.errorType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 操作时间 </template>
            {{ basic.addTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 错误提示 </template>
            {{ basic.errorTitle }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> URL </template>
            {{ basic.url }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> queryParams </template>
            <json-viewer
              v-if="basic.queryParams"
              :value="JSON.parse(basic.queryParams)"
              copyable
            ></json-viewer>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 请求参数 -->
      <div class="card">
        <div class="title">错误详情</div>
        <!-- 数据列表 -->
        <ul class="error">
          <li v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
export default {
  components: { JsonViewer },
  data() {
    return {
      basic: {},
      list: [],
    };
  },
  created() {
    this.itemList();
  },
  methods: {
    go() {
      //返回
      this.$store.dispatch("tags/delVisitedRoute", {
        path: this.$route.path,
      });
      this.$router.push("/logCenter/error");
    },
    itemList() {
      // 获取列表
      this.$axios
        .get("/admin/error/find?id=" + this.$route.query.id)
        .then((data) => {
          this.basic = {};
          this.list = [];
          if (data.code == 200) {
            this.basic = data.data;
            this.list = JSON.parse(data.data.errorContent).exception;
          } else {
            this.$message.error(data.msg);
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
    margin-bottom: 15px;
  }
  .handle {
    float: right;
  }
  .error {
    border-right: 1px solid #ebeef5;
    li {
      border-top: 1px solid #ebeef5;
      border-left: 1px solid #ebeef5;
      padding: 12px 10px;
    }
  }
}
</style>
